import React, { Component } from 'react';
import './main.css';

const TweenMax = window.TweenMax;
let animation;
class Repeat extends Component {
  componentDidMount() {
    animation = TweenMax.to('.green', 1, {x: 500, repeat: 1, yoyo: true});
    animation.pause();
  }
  
  play = () => {
    animation.play();
  }

  render() {
    return (
      <div>
        <p>
          <code>repeat:0, //多循环1次，也就是一共重复执行了2次同样的动画，-1就会无限重复循环</code>
        </p>
        <p>
          <code>repeatDelay:0, //每次重复循环时间3秒,需要配合repeat属性</code>
        </p>
        <p>
          <code>yoyo:false, //如果true，动画的循环是倒序，需要配合repeat属性, 类似溜溜球那种感觉</code>
        </p>
        <div>
          <div className="box green"></div>
        </div>
        <div className="btns">
          <button className="btn" onClick={this.play}>play</button>
        </div>
      </div>
    );
  }
}

export default Repeat;